<template>
  <el-table :data="orderData"
            border
            style="width: 100%">
    <el-table-column prop="orderDetail"
                     align='center'
                     label="产品图片">
      <template v-slot='scoped'>
        <el-avatar :size="50"
                   shape='square'
                   :src="scoped.row.orderDetail[0].imageUrl"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column prop="order_id"
                     align='center'
                     label="订单编号"
                     width="180">
    </el-table-column>
    <el-table-column prop="orderDetail[0].productName"
                     align='center'
                     label="产品名称"
                     width="180">
    </el-table-column>
    <el-table-column prop="orderDetail[0].quantity"
                     align='center'
                     label="数量">
    </el-table-column>
    <el-table-column prop="orderDetail[0].price"
                     align='center'
                     label="价格">
    </el-table-column>
    <el-table-column prop="pay_status"
                     align='center'
                     label="支付状态">
      <template v-slot='scoped'>
        {{scoped.row.pay_status==1?'已经支付':'未支付'}}
      </template>
    </el-table-column>
    <el-table-column prop="order_status"
                     align='center'
                     label="订单状态">
      <template v-slot='{row}'>
        <span v-if='row.order_status==0'>未支付</span>
        <span v-else-if="row.order_status==1">已支付</span>
        <span v-else-if="row.order_status==2">已经取消</span>
        <span v-else-if="row.order_status==3">无效订单</span>
        <span v-else-if="row.order_status==4">交易关闭</span>
        <span v-else-if="row.order_status==5">退货</span>
      </template>
    </el-table-column>
    <el-table-column align='center'
                     label="操作">
      <template v-slot='scoped'>
        <el-button type="primary"
                   v-haspay="[scoped.row.pay_status,scoped.row.order_status]"
                   icon="el-icon-view">支付
        </el-button>
        <el-button type="danger"
                   icon="el-icon-delete">删除</el-button>
      </template>

    </el-table-column>
  </el-table>
</template>

<script>
  import { mapState, mapActions, mapMutations } from 'vuex'
  export default {
    created() {
      this.GET_VIPORDER()
    },
    directives: {
      //自定义指令控制支付状态
      //value=1则是已经支付0为未支付
      haspay: {
        inserted(el, binding) {
          let [paystate, orderstate] = binding.value
          if (orderstate !== 1 || paystate == 1) {
            el.className = el.className + ' ' + 'is-disabled';
            el.disabled = true;
          }
        }
      }
    },
    data() {
      return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      }
    },
    methods: {
      ...mapActions(['GET_VIPORDER'])
    },
    computed: {
      ...mapState(['orderData'])
    }
  }
</script>

<style lang='scss' scoped>
  .el-avatar {
  	width: 158px !important;
  }
</style>
